<template>
	<div class="order">
		<ul class="order-nav" v-if="from!='credit'">
			<li :class="{'order-nav-item':true ,select:status==''}" @click="getOrderList('')">全部</li>
			<li :class="{'order-nav-item':true ,select:status=='1'}" @click="getOrderList('1')">待付款</li>
			<li :class="{'order-nav-item':true ,select:status=='2'}" @click="getOrderList('2')">待发货</li>
			<li :class="{'order-nav-item':true ,select:status=='3'}" @click="getOrderList('3')">配送中</li>
			<!--      <li :class="{'order-nav-item':true ,select:status=='5'}" @click="getOrderList('5')">已完成</li>-->
			<!--      <li :class="{'order-nav-item':true ,select:status=='8'}" @click="getOrderList('8')">待分享</li>-->
			<li :class="{'order-nav-item':true ,select:status=='4'}" @click="getOrderList('4')">待评价</li>
		</ul>
		<ul class="order-item" :class="{normal_top:from!='credit'}">
			<li v-for="(value,index) in orderList" :key='index' style="margin-bottom:15px;background:#fff"
				@click="toOrderDetail(value)">
				<div class="order-item-header">
					<div class="order-item-num">订单号: {{value.order_num}}</div>
					<div class="order-item-status">{{value.statusType}}</div>
					<!--          <div v-if="value.status=='3'" class="order-item-status">待收货</div>-->
					<!--          <div v-if="value.status=='2'" class="order-item-status">待发货</div>-->
					<!--          <div v-if="value.status=='4'" class="order-item-status">待评价</div>-->
					<!--          <div v-if="value.status=='5'" class="order-item-status">已完成</div>-->
					<!--          <div v-if="value.status=='6'" class="order-item-status">交易关闭</div>-->
					<!--          <div v-if="value.status=='8'" class="order-item-status">已付款</div>-->
				</div>
				<div class="order-item-details" v-for="(value1,index1) in value.order_item" :key='index1'>
					<img :src="value1.goods_info.thumb_url" class="order-item-details-img" mode="aspectFill"/>
					<div class="order-item-details-name">
						<div class="details-name">
							<!-- <span class="details-tip">海外购</span> -->
							{{value1.goods_info.name}}
						</div>
						<div class="details-name" v-if="!value1.goods_spu_info">

						</div>
						<div class="details-name" v-if="value1.goods_spu_info">
							{{value1.goods_spu_info.size_spu_name==''?'':(value1.goods_spu_info.size_spu_name+'码')}}
							{{value1.goods_spu_info.color_spu_name==''?'':('，'+value1.goods_spu_info.color_spu_name)}}
						</div>
						<div class="details-number">
							<div class="details-number-money" v-if="value.type!='integral'">￥{{value1.s_price}}</div>
							<div class="details-number-money" v-else>积分 {{value1.goods_info.exchange_integral}}</div>
							<div class="details-number-number">X{{value1.num}}</div>
						</div>
					</div>
				</div>

				<div class="order-item-header">
					<div class="order-item-status1" >支付方式</div>
					<div class="order-item-status1">{{value.pay_type=="balance"?'余额支付':'微信支付'}}</div>
				</div>
				<div class="order-item-header" v-if="from!='credit'">
					<div class="order-item-num1" v-if="value.type!='integral'">合计:￥{{value.s_amount}}</div>
					<div class="order-item-num1" v-else>共花积分: {{value.integral}}</div>
					<div class="order-item-status1">(含运费￥{{value.express_fee}})</div>
				</div>
				<div class="order-item-btn" v-if="from!='credit'">
					<div class="order-item-btn-pay" v-if="value.status=='1'" @click.stop="changePayment(value)">马上付款</div>
					<div class="order-item-btn-pay" v-if="value.status=='4'" @click.stop="toComment(value.order_num)">去评价</div>
					<div class="order-item-btn-canel" v-if="value.status=='1'" @click.stop="cancel(value.order_num)">取消订单</div>
					<div class="order-item-btn-pay" v-if="value.status=='3'" @click.stop="recieve(value.order_num)">确认收货</div>
					<!--<div class="order-item-btn-pay" v-if="value.status == '3' || value.status == '4' || value.status == '2'" @click.stop="afterSale(value.order_num)">申请售后</div>-->
				</div>
			</li>
			<li v-if="orderList.length==0" class="null">暂无订单数据~~</li>
		</ul>

		<div class="module" @click.stop="balanceShow=false" v-if="balanceShow">
			<div class="module-pay">
				<img class="del-icon" :src="FileUrl+'del.png'" @click.stop="balanceShow=false"/>
				<div class="title">番禺供销社百越网购</div>
				<div class="balance">{{values.s_amount}}</div>
				<div class="tips">
					<span>付款方式</span>
					<span>账户余额（{{balance.discount_info.name}}）</span>
				</div>
				<div class="btn">
					<div class="to-pay" @click.stop="balancePayment">付款</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>


export default {
	components: {},

	data() {
		return {
			FileUrl: this.$base,
			orderList: [],
			status: "",
			page: 1,
			from: '',//为credit，来自积分商城
			// changeShow: false,
			balanceShow: false,
			myBalance: 0,
			values: '',
			payArray:['微信支付', '余额支付'],
			balance: ''
		}
	},
	methods: {
		async getOrderList(status) {
			wx.showLoading()
			var userToken = wx.getStorageSync('userToken')
			if (this.status != status) {
				this.orderList = [];
				this.page = 1;
			}
			let res = await this.$request.getData('/order/getUserAllOrders', {
				user_token: userToken,
				status: status,
				page: this.page,
				limit: 5
			})
			this.orderList = this.orderList.concat(res.data.data)
			this.status = status
			wx.hideLoading()
		},
		toComment(num) {
			this.$currency.navigateTo(`/pages/comment/comment?order_num=${num}`);
		},
		changePayment(value){
			this.values = value;
			this.checkMyBalance(value);
			// let _this = this;
			// if (value.pay_type=="weixin") {
			//   _this.payment(value);
			// }else if(value.pay_type=="balance"){
			//   _this.balanceShow = true;
			// }
		},
		//获取我的余额
		async checkMyBalance(value){
			var userToken=wx.getStorageSync('userToken');
			let res=await this.$request.getData('/payment/checkMyBalance',{
				user_token: userToken
			})
			if (res.data.level == 'success'){
				this.balance = res.data.data;
				if (value.pay_type == 'weixin') {
					this.payArray = [
						"微信支付",
						"余额支付"+"("+res.data.data.available_money+")"
					]
				}else {
					this.payArray = [
						"余额支付"+"("+res.data.data.available_money+")",
						"微信支付"
					]
				}
				let _this = this;
				wx.showActionSheet({
					itemList: _this.payArray,
					success (res) {
						console.log(res)
						if (_this.payArray[res.tapIndex]=='微信支付'){
							if (_this.values.pay_type=='weixin') {
								_this.payment(value);
							}else {
								_this.changePayType('weixin');
							}
						} else {
							if (_this.values.pay_type=='balance') {
								_this.balanceShow = true;
							}else {
								_this.changePayType('balance');
							}
						}
					},
					fail (res) {
						console.log(res,"aa")
					}
				})
				// this.balanceShow = true;
				// this.value = value;
				// this.myBalance = res.data.data;
				// let _this = this;
				// wx.showModal({
				//   title: "当前余额",
				//   content: "￥"+res.data.data,
				//   success (res) {
				//     if (res.confirm) {
				//       _this.balancePayment(value);
				//     } else if (res.cancel) {
				//       _this.$currency.showToast('取消成功',1500);
				//     }
				//   },
				// })
				// this.balancePayment(order_num);
			}
		},
		async changePayType(type){
			var userToken=wx.getStorageSync('userToken');
			let res=await this.$request.postData('/order/changePayType',{
				user_token: userToken,
				order_num: this.values.order_num,
				pay_type: type
			})
			if (res.data.level == 'success'){
				this.values = res.data.data;
				this.orderList.forEach((item,index) => {
					if (item.order_num == res.data.data.order_num){
						let str = this.orderList;
						str[index] = res.data.data;
						this.orderList = [];
						this.orderList = str;
					}
				})
				if (type == 'weixin'){
					this.payment(res.data.data);
				}else {
					this.balanceShow = true;
				}
			}
		},
		//余额支付
		async balancePayment(){
			this.balanceShow = false;
			var userToken=wx.getStorageSync('userToken');
			let res=await this.$request.postData('/payment/balancePayment',{
				user_token: userToken,
				order_num: this.values.order_num
			})
			if (res.data.level == 'success'){
				let _this=this;
				_this.$currency.showToast(res.data.message,1500);
				// setTimeout(()=>{
				//   _this.$currency.redirectTo(`/pages/orderDetail/main?num=${order_num}`)
				// },1500)
				setTimeout(() => {
					wx.switchTab({url: '/pages/person/person'})
				}, 1500)
			}else {
				this.$currency.showToast(res.data.message,"none",1500);
			}
		},
		async payment(value) {
			let _this = this
			var userToken = wx.getStorageSync('userToken')
			let res = await _this.$request.postData('/payment/weChatPayment', {
				'order_num': value.order_num,
				user_token: userToken
			})
			let data = res.data.data
			wx.requestPayment({
				timeStamp: data.timeStamp,
				nonceStr: data.nonceStr,
				package: data.package,
				signType: data.signType,
				paySign: data.paySign,
				success() {
					_this.$currency.showToast('支付成功')
					setTimeout(() => {
						wx.switchTab({url: '/pages/person/person'})
					}, 1500)
				},
				fail(res) {
					console.log('取消支付')
				}
			})
		},
		async cancel(order_num) {
			let res = await this.$currency.showModal('取消订单', '是否取消订单')
			if (res) {
				var userToken = wx.getStorageSync('userToken')
				let data = await this.$request.postData('/order/cancelOrder', {order_num: order_num, user_token: userToken})
				this.$currency.showToast(data.data.message)
				this.orderList = [];
				this.page = 1;
				this.getOrderList(this.status)
			}
		},
		async recieve(order_num) {
			let res = await this.$currency.showModal('确认收货', '是否确认收货')
			if (res) {
				var userToken = wx.getStorageSync('userToken')
				let data = await this.$request.postData('/order/confirmReceipt', {
					order_num: order_num,
					user_token: userToken
				})
				this.$currency.showToast(data.data.message)
				this.orderList = [];
				this.page = 1;
				this.getOrderList(this.status)
				this.$currency.navigateTo(`/pages/orderDetail/orderDetail?num=${order_num}`)
			}
		},
		toOrderDetail(value) {
			if (value.type == 'group') {
				this.$currency.navigateTo(`/pages/assembleDetail/assembleDetail?order_num=${value.order_num}`)
			} else {
				this.$currency.navigateTo(`/pages/orderDetail/orderDetail?num=${value.order_num}`)
			}

		}
	},
	onShow() {
		this.orderList = [];
		this.page = 1;
		this.getOrderList(this.status);
	},
	onReachBottom() {
		this.page++
		this.getOrderList(this.status)
	},
	onLoad(options) {
		this.status = options.status == undefined ? '' : options.status
		if (options.status) {
			this.status = options.status
		}
		this.from = options.from == undefined ? '' : options.from
	}
}
</script>

<style scoped lang="scss">
	@import "../../common/css/mixin";
	.normal_top {
		padding-top: 60px !important;
	}

	.flexBetween {
		display: flex;
		justify-content: space-between;
	}

	.order {
		width: 100%;

		&-item {
			background: #eee;
			padding-top: 15px;
		}

		&-nav {
			position: fixed;
			top: 0px;
			border-top: 1px solid #eee;
			width: 100%;
			height: 40px;
			display: flex;
			background: #fff;

			&-item {
				flex: 1;
				text-align: center;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
			}

			.select {
				color: red;
			}

			.select::after {
				content: '';
				height: 2px;
				margin-top: 5px;
				width: 40px;
				background: red;
			}
		}

		&-item-header {
			width: calc(100% - 40px);
			margin: 0px 20px;
			border-bottom: 1px solid #eee;
			line-height: 40px;
			font-size: 14px;
			@extend .flexBetween;

			.order-item-num {
				line-height: 40px;
			}

			.order-item-status {
				line-height: 40px;
				color: red;
			}

			.order-item-num1 {
				color: red
			}
		}

		&-item-details {
			width: calc(100% - 40px);
			margin: 0px 20px;
			border-bottom: 1px solid #eee;
			display: flex;
			height: 100px;

			&-img {
				width: 80px;
				height: 80px;
				margin: 10px 10px;
			}

			&-name {
				flex: 1;
				margin-left: 10px;
				overflow: hidden;
			}

			.details-name {
				margin-top: 10px;
				height: 24px;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;

				.details-tip {
					width: 60px;
					line-height: 25px;
					border: 1px solid black;
					border-radius: 5px;
				}
			}

			.details-number {
				width: 100%;
				line-height: 25px;
				@extend .flexBetween;
			}
		}

		&-item-btn {
			width: 100%;
			height: 45px;

			.order-item-btn-canel {
				width: 70px;
				line-height: 25px;
				border: 1px solid #eee;
				border-radius: 4px;
				text-align: center;
				float: right;
				margin: 10px;
				font-size: 12px;
			}

			.order-item-btn-pay {
				@extend .order-item-btn-canel;
				border: 1px solid red !important;
				color: red;
				border-radius: 4px;
			}
		}
	}
	.null{
		width: 100%;
		padding: 60rpx 0;
		text-align: center;
		font-size: 34rpx;
		color: #959595;
		height: 100rpx;
		line-height: 100rpx;
	}
	.module{
		position: fixed;
		z-index: 3000;
		top: 0;
		left: 0;
		width: 100vw;
		min-height: 100vh;
		background: rgba(0,0,0,0.5);
		@include flex();
		flex-direction: column;
	}
	.module-pay{
		width: 80vw;
		border-radius: 16rpx;
		background: #ffffff;
		/*padding: 30rpx;*/
		.del-icon{
			width: 60rpx;
			height: 60rpx;
			padding: 10rpx;
		}
		.title{
			width: 100%;
			text-align: center;
			height: 80rpx;
			line-height: 80rpx;
			font-size: 32rpx;
		}
		.balance{
			width: 100%;
			text-align: center;
			font-size: 40rpx;
			font-weight: bold;
			height: 100rpx;
			line-height: 100rpx;
		}
		.tips{
			@include flex();
			flex-direction: row;
			border-bottom: 1rpx solid #eeeeee;
			border-top: 1rpx solid #eeeeee;
			span{
				height: 80rpx;
				line-height: 80rpx;
				font-size: 32rpx;
				text-align: center;
				@include ellipsis(1);
			}
			span:first-child{
				width: 30%;
			}
			span:last-child{
				width: 70%;
			}
		}
		.btn{
			width: 100%;
			@include flex();
			flex-direction: column;
			padding: 30rpx 0;
			.to-pay{
				width: 30vw;
				background: #58be6a;
				color: #ffffff;
				border-radius: 16rpx;
				padding: 20rpx 0;
				text-align: center;
			}
		}
	}
</style>
